<template>
  <div>
    <div id="main" class="divSty"></div>
    <el-table :data="list" style="width: 100%">
      <el-table-column prop="id" label="编号" width="180"> </el-table-column>
      <el-table-column prop="platformCode" label="支付平台交易编号" width="180">
      </el-table-column>
      <el-table-column prop="paymentPlatform" label="支付方式">
      </el-table-column>
      <el-table-column prop="payAmount" label="支付金额"> </el-table-column>
      <el-table-column  label="支付状态">
       　<template slot-scope="scope">
　　　　　　　　　　<span v-if="scope.row.status=== 0">未支付</span>
　　　　　　　　　
　　　　　　　　　　<span v-if="scope.row.status=== 1">已支付</span>
　　　　　　　　</template>
      </el-table-column>
      <el-table-column prop="addtime" label="支付时间"> </el-table-column>
    </el-table>

     <pagination
      :input_data.sync="list2"
      :output_data.sync="list"
    ></pagination>
  </div>
</template>

<script>
import Pagination from "@/views/test/zujian.vue";
import Barchart from "@/views/test/head.vue"
import { getPaylog, getList } from "@/api/carepkg/paylog";

export default {
  data() {
    return {
      list2: [],
      list: [],
      datas: [],
      datas2: [],
    };
  },
 components:{Pagination,Barchart},
  mounted() {
    this.drawLine();
  },
  created() {
    this.getList();
    this.getAll();
  },
  watch: {
    datas: {
      handler: function () {
        this.drawLine();
      },
      deep: true,
    },
  },
  methods: {
    getAll() {
      getList().then((response) => {
        if (response.code == 200) {
          this.list2 = response.data;
          this.$message({
            message: "查询成功",
            type: "success",
          });
        } else {
          this.$message({
            message: "查询失败",
            type: "error",
          });
        }
      });
    },
    getList() {
      getPaylog().then((response) => {
        if (response.code == 200) {
          for (var i = 0; i < response.data.length; i++) {
            this.datas.push(response.data[i].value);
            this.datas2.push(response.data[i].name);
          }
        }
        console.log(this.datas + "datas");
      });
    },
    drawLine() {
      let myChart = this.$echarts.init(document.getElementById("main"));
      //   var chartDom = document.getElementById("main");
      //   var myChart = echarts.init(chartDom);
      var option;

      option = {
        title: {
          text: "医院年度收入总览",
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            data: this.datas2,
            axisTick: {
              alignWithLabel: true,
            },
          },
        ],
        yAxis: [
          {
            type: "value",
          },
        ],
        series: [
          {
            name: "总收入",
            type: "bar",
            barWidth: "60%",
            data: this.datas,
          },
        ],
      };

      option && myChart.setOption(option);
    },
  },
};
</script>

<style>
.divSty {
  width: 1000px;
  height: 700px;
}
</style>
